<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>基础建设</title>
		<!--引入所需要的文件-->
		<link rel="stylesheet" href="../../../command/Bootstrap/bootstrap-3.3.0/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="../../../command/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.css"/>
		<link rel="stylesheet" href="../../../command/bower_components/bootstrap-table/dist/bootstrap-table.min.css"/>
		<link rel="stylesheet" href="../../../command/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" />
		<link rel="stylesheet" href="../../../command/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.css" />
		
		<script src="../../../command/jquery-3.4.0.min.js"></script>
		
		<script src="../../../command/Bootstrap/bootstrap-3.3.0/js/bootstrap.min.js"></script>
		<script src="../../../command/bower_components/bootstrap-treeview/dist/bootstrap-treeview.min.js"></script>
		<script src="../../../command/bower_components/moment/min/moment.min.js"></script>
		<script src="../../../command/bower_components/moment/min/locales.min.js"></script>
		<script src="../../../command/bower_components/bootbox/bootbox.min.js"></script>
		<script src="../../../command/bower_components/bootstrap-select/js/bootstrap-select.js"></script>
		<script src="../../../command/bower_components/bootstrap-switch/dist/js/bootstrap-switch.min.js"></script>
		<script src="../../../command/bower_components/bootstrap-table/dist/bootstrap-table.min.js"></script>
		<script src="../../../command/bower_components/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
		<script src="../../../command/bower_components/moment/min/moment-with-locales.min.js"></script>
		
		<script src="../../../command/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
		<script src="../../../command/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
		<script src="../../../command/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

		<script type="application/javascript">
			$(function(){
				//读取数据类型
				$.ajax({
					type:"get",	//提交类型
					dataTyp:"json",//数据类型
					url:"../../../json/jifanginstall.json",//数据访问路径
					success:function(reslt){//返回成功后所调用得函数
						creteTable(reslt);//函数调用
					},
					error:function(date){//返回失败所调用得函数
						alert(date);
					}
				});
				
				/*新增点击按钮事件*/
				$("#btnNew").click(function(){
					$("#Divdata").modal();
				});
				/*修改点击按钮事件*/
				$("#btnUpdate").click(function(){
					$("#DivUpdatedata").modal();
				});
				/*删除点击按钮事件*/
				$("#btnDel").click(function(){
					$("#DivDeldata").modal();
				});
				getRole();
			});
			//下拉框
			function getRole(){
				$('#selRole').empty();
				$.ajax({
					type:"get",
					url:"../../../json/comType.json",
					dataType:"json",
					success:function(data){
						//打印输出的数据
						console.log(data);
						//遍历数据，获取id和名字
						if(!data.flag){
							//通过循环获取各个对象的值
							$.each(data, function(index01,value01) {
								$('#selRole').append('<option value="'+value01.rid+'">'+value01.rolename+'</option>');
							});
						}
					},
					error:function(data){
						
					}
				
				});
			}
			
			/*将数据绑定在表格上*/
			function creteTable(userData){
				$("#tblUser").bootstrapTable("destroy");//清空表格
				$("#tblUser").bootstrapTable({
					data:userData,
					loadMsg:"正在加载数据",
					sidePagination:"client",
					pageSize:"3", //分页
					pagination:true,
					contentEditable:true,
					singleSelect:true,
					columns:[
					{
						field:"state",
						title:"全选",
						checkbox:true,
						align:"center"
					},
					{
						field:"uid",
						title:"编号",
						align:"center"
					},
					{
						field:"username",
						title:"名称",
						align:"center"
					},
					{
						field:"email",
						title:"外接网关",
						align:"center"
					},
					{
						field:"cretattime",
						title:"网口数量",
						align:"center"
					}
					]
				});
			}
			$("#btnoff").click(function(){
				$("").val("");
				$("").val("");
			});
		</script>
	</head>

	<body>
		<div class="rightup" style="border: 0px solid gray; background-color: #CCCCCC; height: 30px; font-size: 20;">
			当前位置：机房建设>基础设置	
		</div>
		<div class="container-fluid">
			<div class="row">
			<div class="col-md-4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;网络布线图<br>
			<img src="../../../img/interline.png" style="width: 200px; height: 200px;"/>
			</div>
			<div class="col-md-4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;电源开关分布图<br>
			<img src="../../../img/interline.png" style="width: 200px; height: 200px;"/>
			</div>
			<div class="col-md-4">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消防设施分布图<br>
			<img src="../../../img/interline.png" style="width: 200px; height: 200px;"/>
			</div>
			</div>
			<!--查询区域开始-->
			<div class="row col-md-10">
				<div id="Select" class="form-inline">
					<div class="form-group">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<label class="control-label" for>设备类型</label>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="text" class="form-control" id="txtUsername" name="username" maxlength="20"/>
					</div>
					<div class="form-group">
						<button class="btn btn-danger" id="btnSelect">查询</button>
					</div>
					<div class="form-group">
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<label class="control-label" for>服务品牌</label>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<input type="text" class="form-control" id="txtUsername" name="username" maxlength="20"/>
					</div>
					<div class="form-group">
						<button class="btn btn-danger" id="btnSelect">查询</button>
					</div>
				</div>
				<br />
				<!-- 时间开始 -->
				<div class="form-group col-md-5">
					<label class="control-label col-md-4" for="" style="margin-top: 10px;">开始时间</label>
					<div class="input-group date form_date col-md-8">
						<input id="BeginTime" class="form-control" type="text" value="" readonly placeholderl="开始时间" />
						<span class="input-group-addon" style="width: 25%;"><span class="glyphicon glyphicon-calendar"></span></span>
					</div>	
				</div>
				<div class="form-group col-md-5">
					<label class="control-label col-md-4" for="" style="margin-top: 10px;">截止时间</label>
					<div class="input-group date form_date col-md-8">
						<input id="EndTime" class="form-control" type="text" value="" readonly placeholderl="开始时间" />
						<span class="input-group-addon" style="width: 25%;"><span class="glyphicon glyphicon-calendar"></span></span>
					</div>	
					
				</div>
				<div class="form-group col-md-2">
						<button class="btn btn-danger" id="btnSelect">查询</button>
					</div>
				<!--<div class="input-group date form_date ">
						<input id="EndTime" class="form-control" type="text" value="" readonly placeholderl="截止时间" />
						<span class="input-group-addon" style="width: 25%;"><span class="glyphicon glyphicon-calendar"></span></span>
					</div>-->
				<script type="application/javascript">
					//必须在初始化控件之前进行设置
					$(".form_date").datetimepicker({
						language: 'zh-CN', //中英文
						weekStart: 1, //一周从哪天开始
						todayBtn: 1, //当天日期按钮
						autoclose: 1, //选定时间后是否自动关闭
						todayHighlight: 1, //当天日期高亮
						startView: 2, //选完时间首先显示的视图
						minView: 2, //最精确的时间
						forceParse: 0, //强制解析
						format: "yyyy-mm-dd", //显示格式
						pickerPosition: "bottom-left" //选择框位置
					});
					$("#btnSelect").click(function(){
						//获取日期控件当中的值
						var date1=$(".form_date input").val();
						console.log(date1);
						var date2=$("#EndTime").val();
						alert(date2);
					});
				</script>
				<!-- 时间结束 -->
				<!--<div id="Select" class="form-inline">
					<div class="form-group">
						<label class="control-label" for>购买时间</label>
						<input type="text" class="form-control" id="txtUsername" name="username" maxlength="20"/>
					</div>
					<div class="form-group">
						<button class="btn btn-danger" id="btnSelect">查询</button>
					</div>
					<div class="form-group">
						<label class="control-label" for>截止时间</label>
						<input type="text" class="form-control" id="txtUsername" name="username" maxlength="20"/>
					</div>
					<div class="form-group">
						<button class="btn btn-danger" id="btnSelect">查询</button>
					</div>
				</div>
-->			</div>
			<!--查询结束-->
			
			<!--功能区域开始-->
			<div class="row col-md-10" style="margin-top: 20px;">
					<button class="btn btn-success" id="btnNew">新增</button>
					<button class="btn btn-warning" id="btnUpdate">修改</button>
					<button class="btn btn-danger" id="btnDel">删除</button>
					<button class="btn btn-warning" id="btnkaigong">开工</button>
					<button class="btn btn-warning" id="btnyanshou">验收</button>
			</div>
			<!--功能区域结束-->
			<!--列表开始-->
			<div class="row col-md-10">	
				<table id="tblUser"></table>	
			</div>
			<!--列表结束-->
			
		</div>
		<!--模态框处理-->
		<div class="modal fade" id="Divdata" tabindex="-1" aria-labellebdy="myModelLable" aria-hidden="hidden">
			<div class="modal-dialog">
				<div class="modal-content">
					<!--模态标题-->
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
						<h4 class="modal-title">信息</h4>
					</div>
					<!--主体表单-->
					<div class="modal-body form-inline">
						<div class="form-group">
							<label class="control-label" for="leiDatausername">设备类型</label>
							<input type="text" class="form-control" id="leiDatausername" name="Dataleixing" maxlength="20"/>
						</div>
						<div class="form-group">
							<lable class="control-lable" for="">类型</lable>
							<select id="selRole" name="role" class="form-control"></select>
						</div>
						<div class="form-group">
							<label class="control-label" for>服务器牌</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datapinpai" maxlength="20"/>
						</div>
						<br /><br />
						<div class="form-group">
							<label class="control-label" for>购&nbsp;买&nbsp;人&nbsp;</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datauser" maxlength="20"/>
						</div>
						<div class="form-group">
							<label class="control-label" for>联系方式</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datausernum" maxlength="20"/>
						</div>
						<br /><br />
						<div class="form-group">
							<label class="control-label" for>供&nbsp;应&nbsp;商&nbsp;</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datashang" maxlength="20"/>
						</div>
						<div class="form-group">
							<label class="control-label" for>联系方式</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datashangnum" maxlength="20"/>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" id="btnSave" class="btn btn-info" data-dismiss="modal" aria-hidden="true" onclick="msave()">保存</button>
						<button type="button" id="btnoff" class="btn btn-default" >重置</button>
					</div>
				</div>
			</div>
		</div>
		<!----------------------------------------------------------------------------------->
		<!--模态框处理-->
		<div class="modal fade" id="DivUpdatedata" tabindex="-1" aria-labellebdy="myModelLable" aria-hidden="hidden">
			<div class="modal-dialog">
				<div class="modal-content">
					<!--模态标题-->
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
						<h4 class="modal-title">更改信息</h4>
					</div>
					<!--主体表单-->
					<div class="modal-body form-inline">
						<div class="form-group">
							<label class="control-label" for>设备类型</label>
							<input type="text" class="form-control" id="txtDatausername" name="Dataleixing" maxlength="20"/>
						</div>
						<div class="form-group">
							<label class="control-label" for>服务器牌</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datapinpai" maxlength="20"/>
						</div>
						<br /><br />
						<div class="form-group">
							<label class="control-label" for>购&nbsp;买&nbsp;人&nbsp;</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datauser" maxlength="20"/>
						</div>
						<div class="form-group">
							<label class="control-label" for>联系方式</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datausernum" maxlength="20"/>
						</div>
						<br /><br />
						<div class="form-group">
							<label class="control-label" for>供&nbsp;应&nbsp;商&nbsp;</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datashang" maxlength="20"/>
						</div>
						<div class="form-group">
							<label class="control-label" for>联系方式</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datashangnum" maxlength="20"/>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" id="btnSave" class="btn btn-info" data-dismiss="modal" aria-hidden="true" onclick="msave()">保存</button>
						<button type="button" id="btnoff" class="btn btn-default" data-dismiss="modal" aria-hidden="true">重置</button>
					</div>
				</div>
			</div>
		</div>
		<!------------------------------------------------------------------------------------->
		<!--模态框处理-->
		<div class="modal fade" id="DivDeldata" tabindex="-1" aria-labellebdy="myModelLable" aria-hidden="hidden">
			<div class="modal-dialog">
				<div class="modal-content">
					<!--模态标题-->
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">关闭</button>
						<h4 class="modal-title">信息</h4>
					</div>
					<!--主体表单-->
					<div class="modal-body form-inline">
						<div class="form-group">
							<label class="control-label" for>设备类型</label>
							<input type="text" class="form-control" id="txtDatausername" name="Dataleixing" maxlength="20"/>
						</div>
						<div class="form-group">
							<label class="control-label" for>服务器牌</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datapinpai" maxlength="20"/>
						</div>
						<br /><br />
						<div class="form-group">
							<label class="control-label" for>购&nbsp;买&nbsp;人&nbsp;</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datauser" maxlength="20"/>
						</div>
						<div class="form-group">
							<label class="control-label" for>联系方式</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datausernum" maxlength="20"/>
						</div>
						<br /><br />
						<div class="form-group">
							<label class="control-label" for>供&nbsp;应&nbsp;商&nbsp;</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datashang" maxlength="20"/>
						</div>
						<div class="form-group">
							<label class="control-label" for>联系方式</label>
							<input type="text" class="form-control" id="txtDatausername" name="Datashangnum" maxlength="20"/>
						</div>
					</div>
					<div class="modal-footer">
						<button type="button" id="btnSave" class="btn btn-info" data-dismiss="modal" aria-hidden="true" onclick="msave()">保存</button>
						<button type="button" id="btnoff" class="btn btn-default" data-dismiss="modal" aria-hidden="true">重置</button>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>